<template>
    <div>
        <h1>{{myname}}</h1>
        <ul>
          <li ref='box' class='box' v-for='i in ary' :key='i'>{{i}}</li>
        </ul>
        <button @click='change'>改名字</button>
    </div>
</template>
<script>
// @ is an alias to /src
export default {
    name: 'XXX',
    props:['eee','myname'],
    data() {
        return {
          ary:[111,222,333,444]
        }
    },
    methods: {
      change(){
        // this.myname = 666;
        this.$emit('qqq',"zhufeng")
      }
    },
    mounted() {
      // console.log(document.getElementsByClassName('box'))
      // console.log('start',this.$refs.box)
      // this.ary.push(555)
      
      // this.ary.unshift('000')
      // console.log(this.ary);
      // // DOM的更新是一个异步操作？？为啥是一个异步
      // console.log('update',this.$refs.box)
      // this.$nextTick(()=>{
      //   // DOM的更新完成之后会触发这个函数
      //   console.log('nextTick',this.$refs.box)
      // },this)
      // console.log(this)
    },
    beforeCreate() {
      // 这里是获取不到 data methods computed  里边的属性
      console.log('儿子 beforeCreate')
    },
    created() {
      // 这里是第一个可以获取 data methods computed  里边的属性的钩子函数
      // 一般会做一些初始化的操作
      console.log('儿子 created')
    },
    beforeMount() {
      console.log('儿子 beforeMount')
    },
    mounted() {
      // DOM 渲染完成之后 会触发这个函数
      // 这个钩子函数当中我们是可以直接获取真实DOM
      console.log('儿子 mounted')
    },
}
</script>
<style lang="less">

</style>